<template>
	<div>
		{{ indexLeftBottom }}

		<div>
			<button @click="changeName">changeName</button>
		</div>
	</div>

</template>
<script setup>
	// 通过监听属性 实时监听 pinia 中 列表的数据 
	// 如果数据发生变化 更新到表中 注意 立即执行 和深度监听

	import {
		storeToRefs
	} from "pinia";
	import {wssDp} from "@/utils/ws"
	// beforeCreate()  created() 
	const aa = ref(false)
	const index = useStore.index()
	console.log(index)

	const {
		indexLeftBottom
	} = storeToRefs(index)

	const changeName = () => {
		// index.name = "Mark" + new Date().getTime()
		// console.log(index.name)
	}
	onMounted(() => {
		aa.value = true
		wssDp()
	})

	// watchEffect(name:(newV,oldV) => {
	// 	console.log(newV,oldV)
	// })

	watch(
		() => indexLeftBottom,
		(newV, oldV) => {
			// newValue === oldValue
			console.log(newV, oldV, 50)
		}, {
			deep: true,
			immediate: true
		}
	)
</script>